<template>
  <div class="home-container">
    <div class="main">
      <div class="overview">
        <div class="card-title">概览</div>
        <beamOverView></beamOverView>
      </div>
      <div class="layout">
        <div class="card-container">
          <div class="card-title">进度管理</div>
          <progressManage></progressManage>
        </div>
        <div class="card-container">
          <div class="card-title">钢筋原材进消存情况</div>
          <rebarRawMaterialDeposit></rebarRawMaterialDeposit>
        </div>
      </div>
      <div class="layout">
        <div class="card-container">
          <div class="card-title">质量问题统计</div>
          <qualityStatistics></qualityStatistics>
        </div>
        <div class="card-container">
          <div class="card-title">设备管理</div>
          <deviceManage></deviceManage>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//概览
import beamOverView from "./components/beamOverView.vue";
//设备管理
import deviceManage from "./components/deviceManage.vue";
//进度管理
import progressManage from "./components/progressManage.vue";
//质量问题统计
import qualityStatistics from "./components/qualityStatistics.vue";
//钢筋原材进消存情况
import rebarRawMaterialDeposit from "./components/rebarRawMaterialDeposit.vue";
export default {
  components: {
    beamOverView,
    deviceManage,
    progressManage,
    qualityStatistics,
    rebarRawMaterialDeposit,
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.home-container {
  box-sizing: border-box;
  height: 100%;
  .flex();
  flex-direction: column;
  padding: 10px 0px 0px 10px;
  overflow: hidden;
  .main {
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    overflow: overlay !important;
    .card-title {
      position: absolute;
      font-size: 18px;
      color: #0068b7;
      top: 20px;
      left: 16px;
    }
    .overview {
      position: relative;
      width: 1656px;
      height: 304px;
      background: #ffffff;
      margin-bottom: 10px;
    }
    .layout {
      .flex();
      margin-bottom: 10px;
      .card-container {
        position: relative;
        flex-shrink: 0;
        width: 823px;
        height: 304px;
        background: #ffffff;
        margin-right: 10px;
        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
